<template>
	<div>
		<h2>
			五一快乐作业！
			<datails>
				<summary>每天作业</summary>
				<p>每天25道面试题写在A4纸上</p>
			</datails>
		</h2>
		<!-- 折叠面板 -->
		<el-collapse accordion v-model="today">
			<el-timeline :reverse="true">
				<el-timeline-item
					:key="index"
					v-for="(item, index) in _list"
					:timestamp="item.date"
					placement="top"
				>
					<el-card>
						<!-- 手风琴的折叠面板 -->
						<el-collapse-item title="item.title" name="item.date">
							<div v-html="item.content"></div>
						</el-collapse-item>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</el-collapse>
		<!-- 时间轴 -->
	</div>
</template>

<script>
import data from './data'
export default {
	data() {
		return {
			today: new Date().toLocaleDateString(),
			list: data,
		}
	},
	computed: {
		_list() {
			//1.获取到当天的日期
			const today = new Date().toLocaleDateString()
			//2.用当天日期对比数组里的每一条的日期
			//3.等于或小于当天的日期就返回
			return this.list.filter((item) => item.date <= today)
		},
	},
}
</script>

<style>
</style>